<template>
  <div class="item">
    <TipsItem :required="props.required"
    :label="props.label"></TipsItem>
    <!-- <el-input v-model="value"></el-input> -->
  </div>
  <input v-model="InputValue" :placeholder="props.placeholder" @change="changeText"></input>
</template>

<script setup>
    const props = defineProps({
        required: {
            type: Boolean,
            default: false
        },
        label: {
            type: String,
            default: ""
        },
        placeholder:{
            type: String,
            default: "" 
        },
        inputValue:{
            type: [String, Number],
            default: ""
        }
    })
    const emits = defineEmits(['changeText'])
    //监听文本
    const InputValue = ref(props.inputValue);
    watch(()=>{props.inputValue},(newValue)=>{
        InputValue.value = newValue;
    })
    const changeText = ()=>{
        // 自定义事件
        emits('changeText', InputValue.value);
    }
</script>

<style lang="scss" scoped>
@import "@/assets/styles/theme.scss";
</style>
